<template>
	<view>
		<!-- 转增的信息 -->
		<view class="transfer_box">
			<view class="top">
				-转赠信息-
			</view>
			
			<view class="content">
				<view class="box">
					<text>转赠账号</text>
					<input type="text" placeholder-style="font-size:29rpx;font-weight:normal" placeholder="请填写需要转赠id" v-model="transfer_id">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/4c8fcbdea9d51287a4d02e9b9de2ef51d5b51799.png" mode="" @click="clear(1)"></image>
				</view>
				
				<view class="box">
					<text>转赠金额</text>
					<input type="text" @input="transfer_money" placeholder-style="font-size:29rpx;font-weight:normal" placeholder="请填写需要转赠的金额" v-model="transfer_num">
					<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/4c8fcbdea9d51287a4d02e9b9de2ef51d5b51799.png" mode="" @click="clear(2)"></image>
				</view>
			</view>
			
		<!-- 	<view class="bot">
				<view class="bot_left">
					<text>转赠手续费：{{money_status == false? 0 :beforetransfer.transfer_service}}</text>
					<image src="../../static/user/wenhao.png" mode=""></image>
				</view>
				<view class="bot_right">
					<text>实际到账：{{money_status == false? 0 : beforetransfer.gold_num}}</text>
				</view>
			</view> -->
		</view>
		
		<!-- 转赠协议 -->
		<!-- <view class="priaty">
				<view class="radio-content">
				  <view class="radio-content" >
			
					  <view class="radio" :class="radio_priaty == 1 ? 'radio-default':''" @click="changeRadio_priaty">
						<view :class="radio_priaty == 1 ? 'radio-active':'radio-active-add'"></view>
					  </view>
					  <view style="display: flex;align-items: center;">我已阅读并同意<view class="col" style="color: #FF5F01;" @click="xieyi_transfer()">《转赠协议》</view>及<view class="col" style="color: #FF5F01;" @click="xieyi_fengxian()">《风险提示》</view></view>
					</view>
				</view>
		</view> -->
		<!-- 转赠按钮 -->
		<view class="btn" @click="tranfer_btn()">
			确定转赠
		</view>
		
		<!-- 记录列表 -->
		<view class="tit_box">
			转赠记录
		</view>
		
		<!-- 列表展示 -->
		<view class="list" v-for="(item,index) in detail_list" :key="index" v-if="detail_list.length > 0">
			<view class="list_pic">
				<image :src="item.u_info_u_avatar" mode=""></image>
			</view>
			<view class="list_content">
				<view class="top">
					<text class="name">{{item.u_info_name}}</text>
					<text class="num" style="color: forestgreen;" v-if="item.type.type_value == 7">-{{item.value}}</text>
					<text class="num" style="color: red;" v-if="item.type.type_value == 8">+{{item.value}}</text>
				</view>
				
				<view class="middle">
					<text>ID：{{item.u_store_id}}</text>
				</view>
				
				<view class="bot">
					<text>{{item.addtime}}</text>
					<text>{{item.type.type_name}}</text>
				</view>
			</view>
		</view>
		
		<view class="no_text" v-if="detail_list.length == 0">
			<image src="https://wanchuyun-img.oss-cn-beijing.aliyuncs.com/guomai/cc7c51ec37da95bab43ef9e42c7ff2dbff71c451.png" mode=""></image>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				radio_priaty: 0,
				transfer_id: '',
				transfer_num: '',
				beforetransfer: '',
				detail_list: [],
				money_status: false
			};
		},
		onLoad() {
			this.tranfer_detail()
		},
		
		methods:{
			
			// xieyi_transfer(){
			// 	uni.navigateTo({
			// 		url: '/pages/user/common_protocol?type=4'
			// 	})
			// },
			// xieyi_fengxian(){
			// 	uni.navigateTo({
			// 		url: '/pages/user/common_protocol?type=5'
			// 	})
			// },
			// 清除账号和金币数量
			clear( type ){
				if( type == 1 ){
					this.transfer_id = ''
				}else{
					this.transfer_num = ''
				}
			},
			
			// 金币转增的手续费
			transfer_money(e){
				if( this.transfer_id == '' ){
					
					return
				}
				
				this.https({
					method: "post",
					url: 'home/beforeTransfer',
					data:{
						accept_share_code: this.transfer_id,
						gold_num: this.transfer_num
					},
					success: res => {
						if (res.code == 0) {
							this.beforetransfer = res.data
							this.money_status = true
						}else{
						
						} 
					}
				})
				
			},
			
			// 转赠记录显示
			tranfer_detail(){
				let that = this
				app.globalRequest({
					api: app.getApi().user.getYuEtransferDetail,
					method: 'get'
				}).then(res => {
					if (res.code == 0) {
						that.detail_list = res.data
					}
					if (res.code == 1) {
						
					}
				}).catch(err => {
				
				})
			},
			
			// 转赠
			tranfer_btn(){
				let that = this;
				if( that.transfer_id == ''  ){
					uni.showToast({
						title:'请输入转赠人的id',
						icon: 'none'
					})
					return
				}
				if( that.transfer_num == ''  ){
					uni.showToast({
						title:'请输入需要转赠的金额',
						icon: 'none'
					})
					return
				}
				app.globalRequest({
					api: app.getApi().user.getYuEtransfer,
					data:{
						share_code: that.transfer_id,
						gsts_amount: that.transfer_num
					},
					method: 'post'
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
						that.transfer_id = ''
						that.transfer_num = ''
						that.tranfer_detail()
					}
					if (res.code == 1) {
						uni.showToast({
							title:res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
				
				})
			},
			
			
			// 选中商家协议
			changeRadio_priaty() {
				if( this.radio_priaty == 0 ){
					this.radio_priaty = 1
				}else{
					this.radio_priaty = 0
				}
			},
		}
	}
</script>

<style lang="scss" >
	page{
		background-color: #F9F9FB;
		padding-bottom:10rpx;
	}
	.transfer_box{
		margin: 30rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.top{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;
			box-sizing: border-box;
			border-bottom: 2rpx solid #EEEEEE;
		}
		
		.content{
			padding: 0 34rpx 0;
			box-sizing: border-box;
			.box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #EEEEEE;
				height: 120rpx;
				line-height: 120rpx;
				text{
					font-size: 29rpx;
					color: #333333;
					font-weight: bold;
				}
				input{
					width: 70%;
					color: #111111;
					font-size: 57rpx;
					font-weight: bold;
				}
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 32rpx 40rpx;
			box-sizing: border-box;
			.bot_left{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}
				text{
					font-size: 25rpx;
					color: #666666;
				}
			}
			.bot_right{
				color: #EC1818;
				font-size: 25rpx;
			}
		}
	}
	
	.priaty{
		margin: 30rpx auto 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #000000;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		width: 100%;
		letter-spacing: 1rpx;
		.col{
			color: #FF5F01;
		}
	}
	
	.radio-content {
	  display: flex;
	  align-items: center;
	  .col{
	  	color: #B38E65;
	  }
	}
	.radio {
	  padding: 4rpx;
	  box-sizing: border-box;
	  border-radius: 50%;
	  border: 2rpx solid #CCCCCC;
	  display: flex;
	  flex-direction: column; 
	  align-items: center;
	  justify-content: center;
	  margin: 0rpx 15rpx;
	}
	.radio-active{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #FF5F01;
	}
	
	.radio-active-add{
	  width: 9px; 
	  height: 9px;
	  border-radius: 50%;
	  background-color: #fff;
	}
	
	
	.radio-default{
	  border: 2rpx solid #FF5F01;
	}
	.btn{
		// width: 100%;
		margin: 42rpx 32rpx;
		border-radius: 42rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 33rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(82deg, #FF4203 0%, #FE6101 100%);
	}
	
	.tit_box{
		margin: 0 32rpx;
		height: 100rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 28rpx;
		box-sizing: border-box;
		font-size: 33rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 32rpx;
		.list_pic{
			width: 112rpx;
			height: 112rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.list_content{
			display: flex;
			flex-direction: column;
			width: 75%;
			.top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					font-size: 29rpx;
					color: #333;
					font-weight: bold;
				}
				.num{
					color: #FE5801;
					font-size: 31rpx;
					font-weight: bold;
				}
			}
			.middle{
				font-size: 25rpx;
				color: #333;
				font-weight: bold;
				margin: 16rpx 0;
			}
			
			.bot{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 25rpx;
					color: #666;
					font-weight: bold
				}
			}
		}
	}
	.no_text{
		width: 92%;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 14rpx;
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 50%;
			height: 300rpx;
		}
	}
</style>
